//echarts的配置项文件
//  myChart.clear();
//  myChart.resize();
//水球图的配置项--实时游客统计
import "echarts-liquidfill";
export const liquidfillOption = {
  waveLength: "100%",
  // x轴
  xAxis: {
    show: false, // 不显示
  },

  // y轴
  yAxis: {
    show: false, // 不显示
  },
  series: [
    {
      type: "liquidFill",
      radius: "70%", // 半径大小 可以设置水图的大小
      center: ["50%", "50%"], // 布局位置
      waveLength: "150",
      amplitude: "8%", // 波浪的振幅，可设置为像素值或百分比，其中百分比是相对图的直径
      waveAnimation: true, // 是否开启波浪动画
      animationEasing: "linear", //当波浪从底部开始上升时，初始动画的简化方法。
      animationEasingUpdate: "linear", // 其他动画的简化方法，例如，当数据值改变及波位改变时。
      animationDuration: 2000, // 动画持续时间，单位为毫秒
      animationDurationUpdate: 1000, // 数据更新动画持续时间
      phase: "auto", // 波浪的相位
      period: "auto", // 向前移动一个波长所需的毫秒数
      direction: "right", //波浪滚动的方向
      shape: "circle", // 波浪形状，可被设置为'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' 或者 svg路径

      data: [0.6, 0.4, 0.2], // 水球波纹值 这里配置几个小数就会显示几条水波纹,注意必须是小数

      //设置水波球背景颜色
      backgroundStyle: {
        color: {
          type: "radial",
          x: 0.5,
          y: 0.5,
          r: 0.5,
          colorStops: [
            {
              offset: 0,
              color: "rgba(0,24,55, 0)",
            },
            {
              offset: 0.75,
              color: "rgba(0,24,55, 0)",
            },
            {
              offset: 1,
              color: "rgba(37,237,259, 1)",
            },
          ],
          globalCoord: false,
        },
      },
      //轮廓线配置
      outline: {
        borderDistance: 0,
        itemStyle: {
          borderWidth: 0,
          borderColor: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(50,115,256, 1)",
              },
              {
                offset: 0.5,
                color: "rgba(50,115,233, .75)",
              },
              {
                offset: 1,
                color: "rgba(50,115,233, 1)",
              },
            ],
            globalCoord: false,
          },
        },
      },

      itemStyle: {
        //设置水球波动的渐变颜色
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 1,
              color: "rgba(23,242,206, .65)",
            },
            {
              offset: 0.9,
              color: "rgba(23,242,206, .15)",
            },
            {
              offset: 0.4,
              color: "rgba(23,242,206, .15)",
            },
            {
              offset: 0,
              color: "rgba(12,255,215,1)",
            },
          ],
          globalCoord: false,
        },
      },
      //水球中间展示字体及颜色
      label: {
        normal: {
          textStyle: {
            fontSize: 24,
            color: "#fff",
            fontWeight: 400,
            formatter: "",
          },
        },
      },
    },
  ],
};

//柱状图的配置项--男女比例
export const barOption = {
  //title属性
  title: {
    text: "", //主标题
    textStyle: {
      color: "", //标题文字颜色
    },
    left: "50%", //标题的位置
  },

  //x和y轴的配置
  xAxis: {
    show: false, // x轴不显示
    //x上显示柱状图
    // type: 'category'
    min: 0,
    max: 100,
  },
  // y轴
  yAxis: {
    show: false, // y轴不显示不显示
    //y轴上显示柱状图
    type: "category",
  },
  //布局组件
  grid: {
    top: 0,
    right: 0,
    bottom: 0,
    left: 0,
  },

  //图形的形状配置以及数据配置都是在series节点下
  series: [
    {
      type: "bar",
      data: [68],
      barWidth: 20,
      z: 100, //调试柱状图的层级
      itemStyle: {
        color: "#0077FF", //配置柱状图的颜色
        borderRadius: 20, //配置圆角
      },
    },
    {
      type: "bar",
      data: [100],
      barWidth: 20,
      //调整女士柱状图的位置,让男女柱状图重合并且男柱状图覆盖在女柱状图上面
      barGap: "-100%",
      itemStyle: {
        color: "#FF5F7B",
        borderRadius: 20,
      },
    },
  ],
};

//饼图的配置项 -- 年龄比列
export const pieOption = {
  tooltip: {
    trigger: "item",
  },
  legend: {
    top: 40,
    textStyle: {
      color: "#fff",
      fontSize: 14,
      padding: [3, 10, 3, 10],
    }, //图例组件的公用文本样式
    right: 20, //图例组件的位置
    orient: "vertical", //图例组件方向的设置
    //图例组件的数据
    data: [
      "10岁以下 16%",
      "10-18岁 8%",
      "18岁-30岁 12%",
      "30岁-40岁 24%",
      "40岁-60岁 20%",
      "60岁以上 20%",
    ],
  },
  series: [
    {
      name: "",
      type: "pie",
      radius: ["40%", "70%"],
      center: ["28%", "50%"], // 布局位置
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: "#fff",
        borderWidth: 2,
      },
      label: {
        //环内显示文字
        show: true,
        //文字在饼图的圆环内显示
        position: "inside",
        color: "white",
        // 该方法用于格式环内显示的文字
        formatter: (parms) => {
          let str = parms.name.split(" ")[1];
          return str.substring(0, str.length - 1);
        },
      },
      labelLine: {
        show: false,
      },
      data: [
        { value: 16, name: "10岁以下 16%" },
        { value: 8, name: "10-18岁 8%" },
        { value: 12, name: "18岁-30岁 12%" },
        { value: 24, name: "30岁-40岁 24%" },
        { value: 20, name: "40岁-60岁 20%" },
        { value: 20, name: "60岁以上 20%" },
      ],
    },
  ],
};

//中国地图的配置项
export const mapOption = {
  //地图组件
  geo: {
    map: "china", //中国地图
    roam: false, //鼠标缩放的效果
    //地图的位置调试
    left: 200,
    top: 150,
    right: 150,
    zoom: 1.2,
    bottom: 20,
    //地图上的文字的设置
    label: {
      show: true, //文字显示出来
      color: "white",
      fontSize: 14,
    },

    itemStyle: {
      //每一个多边形的样式
      color: {
        type: "linear",
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: "#042048", // 0% 处的颜色
          },
          {
            offset: 1,
            color: "#99CAF2", // 100% 处的颜色
          },
        ],
        global: false, // 缺省为 false
      },
      opacity: 0.8,
    },
    //地图高亮的效果
    emphasis: {
      itemStyle: {
        color: "#2B91B7",
      },
      label: {
        fontSize: 40,
      },
    },
  },
  //布局位置
  grid: {
    left: 0,
    top: 0,
    right: 0,
    bottom: 0,
  },
  series: [
    {
      type: "lines", //航线的系列
      data: [
        {
          coords: [
            [116.405285, 39.904989], // 起点
            [119.306239, 26.075302], // 终点
          ],
          // 统一的样式设置
          lineStyle: {
            color: "#00EAFF",
            width: 1,
            opacity: 0.6,
            curveness: 0.2,
          },
        },
        {
          coords: [
            [87.348055, 36.393008], // 起点
            [114.298572, 30.584355], // 终点
          ],
          // 统一的样式设置
          lineStyle: {
            color: "#00EAFF",
            width: 1,
            opacity: 0.6,
            curveness: 0.2,
          },
        },
      ],
      //开启动画特效
      effect: {
        show: true,
        // symbol: 'arrow',
        symbol:
          "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z",
        color: "#00EAFF",
        symbolSize: 15,
        period: 6,
        trailLength: 0,
      },
    },
  ],
};

//折线图的配置项--未来30天游客量趋势图
export const lineOption = {
  backgroundColor: "#03213D",
  color: ["#5090FF", "#01B3E4"],
  tooltip: {
    trigger: "axis",
    backgroundColor: "rgba(0,0,0,.6)",
    borderColor: "rgba(147, 235, 248, .8)",
    textStyle: {
      color: "#FFF",
    },
  },
  grid: {
    left: "2%",
    right: "5%",
    bottom: "5%",
    top: "30px",
    containLabel: true,
  },

  legend: {
    show: true,
    icon: "rect",
    orient: "horizontal",
    left: "right",
    itemWidth: 12,
    itemHeight: 12,
    formatter: ["{a|{name}}"].join("\n"),
    textStyle: {
      fontSize: 12,
      color: "#6A93B9",
      height: 8,
      rich: {
        a: {
          verticalAlign: "bottom",
        },
      },
    },
    // data: ['魅力值', '能力值']
  },
  xAxis: {
    type: "category",
    axisLine: {
      lineStyle: {
        color: "#BDD8FB",
        fontSize: 12,
      },
    },
    axisLabel: {
      // interval:0,
      color: "#BDD8FB",
      fontSize: 12,
    },
    axisTick: {
      show: false,
    },
    data: ["05/05", "05/07", "05/09", "05/11", "05/13", "05/15", "05/17"],
  },
  yAxis: {
    name: "访问量",
    type: "value",
    min: 0,
    minInterval: 1,
    nameTextStyle: {
      fontSize: 12,
      color: "#BDD8FB",
      align: "center",
    },
    splitLine: {
      lineStyle: {
        color: "rgba(255, 255, 255, 0.15)",
        // type: 'dashed', // dotted 虚线
      },
    },
    splitArea: { show: false },
    axisLine: {
      //y轴的轴线
      show: true,
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      fontSize: 12,
      fontFamily: "Bebas",
      color: "#BDD8FB",
    },
  },
  series: [
    {
      type: "line",
      // symbol: "none",
      // showSymbol: false,
      smooth: true, // 是否曲线
      name: "", // 图例对应类别
      data: [4000, 6000, 7000, 2000, 5000, 7000, 9000], // 纵坐标数据
      areaStyle: {
        // 区域颜色
        // color: new graphic.LinearGradient(0, 0, 0, 1, [
        // 	{
        // 		offset: 0,
        // 		color: "#5090FF",
        // 	},
        // 	{
        // 		offset: 1,
        // 		color: "#1057E5",
        // 	},
        // ]),
        color: {
          type: "linear",
          x: 0, //右
          y: 0, //下
          x2: 0, //左
          y2: 1, //上
          colorStops: [
            {
              offset: 0.1,
              color: "#5090FF", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#1057E500", // 100% 处的颜色
            },
          ],
        },
      },
    },
    // {
    //     type: 'line',
    //     smooth: true,
    //     name: '能力值',
    //     data: [1000, 4000, 5000, 6000, 3000, 8000, 7000],
    //     areaStyle: {
    //         // color: new graphic.LinearGradient(0, 0, 0, 1, [
    //         // 	{
    //         // 		offset: 0,
    //         // 		color: "#01B3E4",
    //         // 	},
    //         // 	{
    //         // 		offset: 1,
    //         // 		color: "#86DCF3",
    //         // 	},
    //         // ]),
    //         color: {
    //             type: 'linear',
    //             x: 0, //右
    //             y: 0, //下
    //             x2: 0, //左
    //             y2: 1, //上
    //             colorStops: [
    //                 {
    //                     offset: 0.1,
    //                     color: '#01B3E4' // 0% 处的颜色
    //                 },
    //                 {
    //                     offset: 1,
    //                     color: '#86DCF300' // 100% 处的颜色
    //                 }
    //             ]
    //         }
    //     }
    // }
  ],
};

//饼图的配置项--预约渠道数统计
export const pieNumOption = {
  tooltip: {
    trigger: "item",
  },
  legend: {
    top: 80,
    left: 10, //图例组件的位置
    icon: "circle",
    //图例的图形样式
    itemStyle: { borderCap: "round" },
    textStyle: {
      color: "#fff",
      fontSize: 14,
      padding: [3, 10, 3, 10],
    }, //图例组件的公用文本样式
    orient: "vertical", //图例组件方向的设置
    //图例组件的数据
    data: ["智慧平板平台 40%", "友盟 10%", "飞猪 20%", "其它渠道 30%"],
  },
  series: [
    {
      name: "",
      type: "pie",
      radius: ["40%", "70%"],
      center: ["74%", "50%"], // 布局位置
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: "#fff",
        borderWidth: 2,
      },
      label: {
        //环内显示文字
        show: true,
        //文字在饼图的圆环内显示
        position: "inside",
        color: "white",
        // 该方法用于格式环内显示的文字
        formatter: (parms) => {
          let str = parms.name.split(" ")[1];
          return str.substring(0, str.length - 1);
        },
      },
      labelLine: {
        show: false,
      },
      data: [
        { value: 40, name: "智慧平板平台 40%" },
        { value: 10, name: "友盟 10%" },
        { value: 20, name: "飞猪 20%" },
        { value: 30, name: "其它渠道 30%" },
      ],
    },
  ],
};

// -------------- 饼图的另外配置 ---------------
//做环形图的本质是 radius: ['内半径', '外半径'] 内半径!=0
const backgroundColor = "#101736";
const title = {
  text: "",
  textStyle: {
    color: "#fff",
    fontSize: 16,
  },
  padding: 0,
  top: 35,
  left: "center",
};
const legend = {
  //data，就是取得每个series里面的name属性。
  orient: "vertical",
  icon: "circle", //图例形状
  padding: 0,
  top: 60,
  left: 20,
  itemWidth: 14, //小圆点宽度
  itemHeight: 14, // 小圆点高度
  itemGap: 21, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
  textStyle: {
    fontSize: 14,
    color: "#ffffff",
  },
};
const tooltip = {
  show: true,
  formatter: "{b}:{d}%",
};
//颜色里列表
const color = ["#03acd1", "#04cab7", "#03c781", "#fce348"];
export const option = {
  backgroundColor,
  color,
  title,
  tooltip,
  legend,
  series: [
    {
      name: "",
      type: "pie",
      radius: ["40%", "70%"],
      center: ["74%", "50%"], // 布局位置
      avoidLabelOverlap: false,
      //启用鼠标放上去放大效果，这个挺好的
      itemStyle: {
        // borderRadius: 10,
        // borderColor: '#fff',
        // borderWidth: 2
        //每个扇形的设置
        borderColor: "rgba(0,0,0,.1)", //扇形边框颜色
        borderWidth: 1, //扇形边框大小 要先给borderColor颜色 设置borderWidth才会有效果
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: "rgba(0, 0, 0, 0.5)",
      },
      label: {
        //环内显示文字
        show: true,
        //文字在饼图的圆环内显示
        position: "inside",
        color: "white",
        // 该方法用于格式环内显示的文字
        formatter: (parms) => {
          let str = parms.name.split(" ")[1];
          return str.substring(0, str.length - 1);
        },
      },
      labelLine: {
        show: false,
      },
      data: [
        { value: 40, name: "智慧平板平台 40%" },
        { value: 10, name: "友盟 10%" },
        { value: 20, name: "飞猪 20%" },
        { value: 30, name: "其它渠道 30%" },
      ],
    },
  ],
};
